<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
.showNum {
	cursor: pointer;
}
</style>
</head>
<body>
<script type="text/javascript"
		src="static/bootstrap/js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript"
		src="static/bootstrap/js/bootstrap.min.js"></script>

<c:if test="${empty(sessionScope.user)}"><a href="user?action=login">登录</a></c:if><!-- 如果为用户为空显示登录 -->
	<c:if test="${!empty(sessionScope.user) }">${user.uname}</c:if><!-- 不为空显示用户名 -->
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="user?action=logout">注销</a>
	
	<script type="text/javascript">
window.onload=function(){
	cartNum=document.getElementsByClassName("cartNum");
}
//数量+1
function showAdd(uid,gid,x) {
	var xhr=new XMLHttpRequest();
	xhr.open("get","cart?action=updateAdd&uid="+uid+"&gid="+gid);
	xhr.send();
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4 && xhr.status==200){
			var data=xhr.responseText;
			//接收要显示的数量
			//cartNum.innerHTML=data;
			x.previousElementSibling.innerHTML=data;//获得上一个紧邻的兄弟节点
		}
	}
}
function showSub(uid,gid,y) {
	var xhr=new XMLHttpRequest();
	xhr.open("get","cart?action=updateSub&uid="+uid+"&gid="+gid);
	xhr.send();
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4 && xhr.status==200){
			var data=xhr.responseText;
			//接收要显示的数量
			//cartNum.innerHTML=data;
			y.nextElementSibling.innerHTML=data;//获取下一个紧邻的兄弟节点
		}
	}
}
var sum=0;
$(function () {
	$(".cartNum").each(function () {//.cartNum是Class属性
		var num=$(this).html();//获取当前节点的值
		var price=$(this).parent().next().html();//获得当前节点的父节点的下一个兄弟节点的值
		sum+=(num*price);
		$("#Sum").html(sum);//#Sum代表id属性，将sum的值赋给当前id属性
	});
})
</script>
<form >
	<table border="1" align="center">
		<tr>
			<td>商品编号</td>
			<td>商品名</td>
			<td>图片</td>
			<td>数量</td>
			<td>单价</td>
			<td colspan="3">总计</td>
		</tr>
		<c:forEach items="${items}" var="cart">
			<tr>
				<td>${cart.goods.gid}</td>
				<td>${cart.goods.gname}</td>
				<td><a href="goods?action=selectOne&id=${cart.goods.gid }">
						<img width="80px" height="80px" src="${cart.goods.pic }">
				</a></td>
				<td><span onclick="showSub(${sessionScope.user.uid},${cart.goods.gid},this)" class="showNumSub">-</span>
				    <span class="cartNum">${cart.num}</span>
					<span onclick="showAdd(${sessionScope.user.uid},${cart.goods.gid},this)" class="showNumAdd">+</span>
					</td>
				<td>${cart.goods.price}</td>
				<td>${(cart.goods.price)*(cart.num)}</td>
			</tr>
		</c:forEach>
		<tr>
		<td colspan="9">
		<span>合计：</span>&nbsp￥<span class="cartSumPrice" id="Sum">0</span><button>结算</button>
		</td>
		
		</tr>
		</table>
		</form>
</body>
</html>